<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			h2 {
				margin-bottom: 20px;
				background: #ccc;
				display: inline-block;
			}
			
			h2 span {
				background: blue;
				display: inline-block;
				width: 40px;
				height: 40px;
				text-align: center;
				cursor: pointer;
			}
			
			div {
				width: 600px;
				height: 200px;
				border: 2px solid blue;
				overflow: hidden;
				position: relative;
			}
			
			ul {
				width: 1200px;
				position: absolute;
				left: 0px;
				transition: 0.2s linear;
			}
			
			ul li {
				width: 200px;
				height: 200px;
				background: #eee;
				float: left;
			}
			
			ul li:nth-child(even) {
				background-color: green;
			}
			
			ul.now1 {
				left: -600px;
			}
			
			ul.now2 {
				left: 0px;
			}
			
			span.disable {
				background: #ccc;
				color: #eee;
				cursor: default;
			}
		</style>
	</head>

	<body>
		<h2><span>&lt;</span> | <span>&gt;</span> </h2>
		<div>

			<ul>
				<li>AAA</li>
				<li>BB</li>
				<li>CC</li>
				<li>DD</li>
				<li>EE</li>
				<li>FF</li>
			</ul>
		</div>

		<script>
			var btn = document.querySelectorAll("span");
			var ul = document.querySelector("ul");
			var h2 = document.querySelector("h2");
			var i = 0,
				timer;
			btn[1].onclick = function() {

				ul.className = "now1";
				this.className = "disable"
				this.previousElementSibling.className = "";
				i = 1;
			}
			btn[0].onclick = function() {
				ul.className = "now2";
				this.className = "disable"
				this.nextElementSibling.className = "";
				i = 0;
			}

			//自动走动

			function AutoPlay() {
				if(i == 0) {
					i = 1;
					ul.className = "now1";
					btn[0].className = ""
					btn[1].className = "disable"
				} else if(i == 1) {
					i = 0;
					ul.className = "now2";
					btn[0].className = "disable"
					btn[1].className = "";
				}

			}

			timer = setInterval(AutoPlay, 2000);

			h2.onmouseover = function() {
				clearInterval(timer)
			}
			h2.onmouseout = function() {
				timer = setInterval(AutoPlay, 2000);
			}
		</script>
	</body>

</html>